<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--头部固定引用-->
  <meta charset="utf-8">
  <meta name="full-screen" content="yes">
  <meta name="x5-fullscreen" content="true">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  <link rel="stylesheet" href="../../css/base.css">
  <link rel="stylesheet" href="../../css/newCommentDetail.css">
  <link rel="stylesheet" href="../../css/actionsheet.css">
  <!--固定引用结束,自定义引用添加在下面-->
  <title>JT2</title>
  <!--页面样式添加在这里，多看看base。css里面的公共样式，大部分常用的都有，避免使用独立css文件为单独页面设置样式，避免随意添加样式到公共样式-->
  <style>
      .commentdetails-header {
        padding:0.22rem 0.32rem 0.26rem;
        font-family: PingFangSC-Medium;
        font-size: 0.32rem;
        color: #222222;
        letter-spacing: 0;
        text-align: center;
        /* position: relative; */
        background-color: #fff;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
      }
      .commentdetails-header img {
          width: 0.32rem;
          height: 0.32rem;
          position: absolute;
          left: 0.32rem;
          top: 50%;
          transform: translateY(-50%);
      }
      .commentdetails-list {
          padding: 1.22rem 0.26rem 0.3rem 0.3rem;
          background-color: #fff;
          min-height:3.18rem;
          position: relative;
      }
      .commentdetails-list-left {
          width: 0.6rem;
          height: 0.6rem;
          /* background: pink; */
          position: absolute;
          left: 0.3rem;
          top: 1.22rem;
      }
      .commentdetails-list-left img {
          width: 0.6rem;
          height: 0.6rem;
          border-radius: 50%;
      }
      .commentdetails-list-right {
            position: absolute;
            left: 1.2rem;
            right: 0.26rem;
            top: 1.2rem;
      }
     .list-right-title {
        font-family: PingFangSC-Semibold;
        color: #9FA7AD;
        font-size: 0.26rem;
        line-height: 0.68rem;
        display: flex;
        align-items: center;
     }
     .list-right-subtitle {
        font-family: PingFangSC-Regular;
        font-size: 0.3rem;
        color: #1A1A1A;
        line-height: 0.44rem;
        margin-bottom: 0.2rem;
     }
     .list-right-time {
        font-family: PingFangSC-Regular;
        font-size: 0.24rem;
        color: #989898;
        line-height: 0.34rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
     }

     .point {
        display: inline-block;
        width: 0.06rem;
        height: 0.06rem;
        background: #ccc;
        border-radius: 50%;
        margin: 0 0.1rem;
     }

      .create-dttm {
        color: #9FA7AD;
        font-size: 0.24rem;
        font-weight: 400;
      }

       .reply {
        font-weight: 400;
        font-size: 0.24rem;
        color: #6a6767 !important;
        margin-left: 0.12rem;
      }

     .commentdetails-comment {
          background-color: #fff;
          padding-bottom: 1.02rem;
      }
      .commentdetails-comment .commentheader {
        padding: 0.3rem 0.26rem  0.26rem;
        font-family: PingFangSC-Medium;
        font-size: 0.28rem;
        color: #393939;
        line-height: 0.4rem;
      }
      .commentdetails-comment .line {
          width: 100%;
          height: 0.02rem;
          background: #F7F7F7;
      }
      .commentdetails-comment .commentmain {
        padding: 0rem 0.26rem 0 0.3rem;
      }
      .commentdetails-comment .commentmain .mainTop .imgbox{
            display: inline-block;
            vertical-align: middle;
            width: 0.6rem;
            height: 0.6rem;
            /* background: pink; */
            margin-right: 0.22rem;
            border-radius: 50%;
      }
      .commentdetails-comment .commentmain .mainTop .imgbox img {
            width: 0.6rem;
            height: 0.6rem;
            border-radius: 50%;
      }
      .commentdetails-comment .commentmain .mainTop span {
        font-family: PingFangSC-Semibold;
        font-size: 0.28rem;
        color: #333333;
        line-height: 0.68rem;
      }
      .commentdetails-comment .commentmain .maintext {
        margin-left: 0.9rem;
        font-family: PingFangSC-Regular;
        font-size: 0.3rem;
        color: #1A1A1A;
        line-height: 0.44rem;
        padding-bottom: 0.2rem;
      }
      .commentdetails-comment .commentmain .mainbottom{
        margin-left:0.9rem;
        position: relative;
        /* height: 1rem; */
        padding-bottom: 0.42rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.24rem;
      }
      .commentdetails-comment .commentmain .mainbottom .mainbottom-left{
         display: flex;
         align-items: center;
         justify-content: center;
      }
      .commentdetails-comment .commentmain .mainbottom .mainbottom-left span:nth-child(1){
        font-family: PingFangSC-Regular;
        color: #9FA7AD;
      }
      .commentdetails-comment .commentmain .mainbottom .mainbottom-left span:nth-child(3){
        font-family: PingFangSC-Regular;
        color: #9FA7AD;
      }

      .commentdetails-comment .commentmain .mainbottom .mainbottom-right{
        font-family: MicrosoftYaHeiUI;
        font-size: 0.24rem;
        color: #999999;
        letter-spacing: 0;
      }
      .commentdetails-comment .commentmain .mainbottom .mainbottom-right img{
          width: 0.32rem;
          height: 0.32rem;
          margin-right: 0.06rem;
      }
      .commentdetails-comment .commentmain .secondcomment{
          margin-left: 0.78rem;
      }
      .commentdetails-comment .commentmain .secondcomment .secondcomment-top .imgbox{
        width: 0.48rem;
        height: 0.48rem;
        border-radius: 50%;
        background: pink;
        display: inline-block;
        margin-right: 0.2rem;
      }
      .commentdetails-comment .commentmain .secondcomment .secondcomment-top span {
        font-family: PingFangSC-Medium;
        font-size: 0.24rem;
        color: #333333;
        line-height: 0.48rem;
      }
      .commentdetails-comment .commentmain .secondcomment .secondcomment-text{
        font-family: PingFangSC-Regular;
        font-size: 0.28rem;
        color: #595959;
        line-height: 0.4rem;
        margin-left: 0.68rem;
      }
      .commentdetails-comment .commentmain .secondcomment .secondcomment-explain{
        margin-left: 0.68rem;
        position: relative;
        height: 0.34rem;
        margin-bottom: 0.24rem;
      }
      .comment-line {
          height: 0.02rem;
          margin-left: 0.9rem;
          background: #f7f7ff;
          /* margin-top: 0.34rem; */
      }
      .blank {
          height: 0.52rem;
          background-color: #fff;
      }
      .commentdetails-footer {
          background-color: #fff;
          /* padding: 0.2rem 0.62rem 0.2rem 0.32rem; */
          padding: 0.2rem 0 0.2rem 0.32rem;
          border-top: 1px solid #f7f7f7;
          position: fixed;
          bottom: 0;
          width: 100%;
          z-index: 1;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
      .commentdetails-footer input{
        width: 100%;
        height: 0.6rem;
        border-radius: 0.8rem;
        padding-top: 0.12rem;
        padding-bottom: 0.12rem;
        padding-left: 0.28rem;
        margin-right: 0.3rem;
        font-size: 0.26rem;
        background: #f7f7f7;
        color: rgba(34, 34, 34, 0.45);
        flex: 1;
      }
      .commentdetails-footer-imgBox {
          position: relative;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.4rem;
      }
      .commentdetails-footer-imgBox img {
          width: 0.36rem;
          height: 0.36rem;
      }
      .commentdetails-footer-imgBox span{
        position: absolute;
        right: -0.24rem;
        top: -0.18rem;
        font-family: PingFangSC-Regular;
        font-size: 0.22rem;
        color: #FFFFFF;
        width: 0.38rem;
        height: 0.24rem;
        text-align: center;
        background: #EF4244;
        border-radius: 0.12rem;
        line-height: 0.24rem;
        text-align: center;
      }
      .mainfooter {
        display: inline-block;
      }
      .commentmain-no{
        background-color: #fff;
      }
      .commentmain-no-img {
          margin-top: 1.08rem;
          margin-bottom: 0.52rem;
          text-align: center;
      }
      .commentmain-no-img  img {
          width: 2.36rem;
          height: 1.42rem;
      }
      .commentmain-no-text {
        text-align: center;
        padding-bottom: 3.42rem;
      }
      .commentmain-no-text span{
        font-family: PingFangSC-Regular;
        font-size: 0.28rem;
        color: #595959;
        line-height: 0.44rem;
      }
      .footer-noconfirm {
        display: block;
      }

      .second-comment-official {
        background: #DA241A;
        font-size: 0.2rem !important;
        color: #fff !important;
        text-align: center;
        padding: 0.02rem 0.05rem;
        line-height: 0.24rem !important;
        margin-left: 0.08rem;
        border-radius: 0.04rem;
     }

     .iconBox {

     }

     .click-icon {
       width: 0.32rem;
       height: 0.32rem;
     }

     .click-num {
      font-weight: 400;
      font-size: 0.24rem;
      color: #9FA7AD;
     }

     .timeBox-left {
      display: flex;
      align-items: center;
     }

     .mainTop .userName {
       color: #9FA7AD !important;
       font-size: 0.26rem !important;
     }

     .footer-confirm {
       display: flex;
       justify-content: center;
       align-items: center;
       padding-right: 0.28rem;
     }
     .send-msg {
      font-size: 0.26rem;
      color: #9FA7AD;
      margin-left: 0.2rem;
     }
     .face-icon {
        width: 0.245rem;
        height: 0.218rem;
     }

     .face-icon-wrap {
      position: absolute;
      right: 1.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.6rem;
      width: 0.8rem;
     }

     #faceIcon-footer {
       display: none;
     }

    .footer-up {
      transform: translateY(-4rem);
    }

    .no-more-comment {
      text-align: center;
      padding: 0.4rem 0;
      margin-top: 0.3rem;
    }

    .no-more-comment span {
      font-family: PingFangSC-Regular;
      font-size: 0.26rem;
      color: #999999;
      line-height: 0.36rem;
    }

    .main {
      margin-top: 0.54rem;
    }
  </style>
</head>
<!--尽量不要在body上添加样式，除了背景色-->
<body>
<div>
  <!--具体代码-->
  <!-- 头部 -->
  <div class="commentdetails-header">
    <img src="../../images/allPic/jiantou.png" alt="" onclick="closeWindow()">
    评论详情
  </div>

  <!-- 评论详情 -->
  <div class="commentdetails-list">

  </div>

  <!-- 评论内容 -->
  <div class="commentdetails-comment">
        <!-- <div class="commentheader">

        </div> -->
        <div class="line"></div>
        <div class="main"></div>
        <!-- 有评论 -->

  </div>

        <!-- 留白 -->
        <!-- <div class="blank"></div> -->
  </div>

    <!-- 底部输入框 -->
    <div class="commentdetails-footer">
      <input type="text" placeholder="说说你的看法..." class="commentInpt" >
       <div id="faceIconWrap" class="face-icon-wrap">
         <img class="face-icon" src="../../images/zixun/qing-icon.png" alt="">
       </div>
      <div style='display:inline-block;' class="mainfooter">
    </div>
    </div>

    <!-- 表情选择器 -->
    <div class="emoji-panel" id="emojiPanel" style="display: none;">
        <div class="emoji-container">
            <div class="emoji-grid">
                <!-- 表情将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <!-- ActionSheet 组件 -->
    <div id="commentActionSheet" class="comment-action-sheet" style="display: none;">
        <div class="action-sheet-overlay"></div>
        <div class="action-sheet-content">
            <div class="action-sheet-actions">
                <div class="action-sheet-item" id="actionCopy">
                    <span>复制</span>
                </div>
                <div class="action-sheet-item" id="actionReply">
                    <span>回复</span>
                </div>
                <div class="action-sheet-item" id="actionDelete" style="display: none;">
                    <span>删除</span>
                </div>
            </div>
            <div class="action-sheet-gap"></div>
            <div class="action-sheet-cancel" id="actionCancel">
                <span>取消</span>
            </div>
        </div>
    </div>

    <!-- 删除确认弹窗 -->
    <div id="deleteConfirmModal" class="delete-confirm-modal" style="display: none;">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-title">提示</div>
            <div class="modal-message">确定要删除这条评论吗？</div>
            <div class="modal-actions">
                <div class="modal-btn modal-cancel" id="deleteCancel">取消</div>
                <div class="modal-btn modal-confirm" id="deleteConfirm">确定</div>
            </div>
        </div>
    </div>

</body>
<!--下面五个文件为固定引用，自己根据情况调整路径，不要跟换引入顺序，其他引用添加在后面-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<script src="../../js/dayjs.js"></script>
<!--固定引用结束-->
<!--避免一个页面包含过多功能，减少js重绘页面，推荐分功能，分页面-->
<script>
  //一级评论页面拿到的父级Id和互动id和评论的内容还有是否唤起弹框
  let  parentId
  let  commentObjectId
  let  content
  let  isopencomment
  let  token
  let  pageNum = 1
  /*固定页面初始化方法，用于替代$(function(){}),param为url参数，Object类型*/
  function initPage(params) {
    console.log(params)
    parentId = params.parentId
    commentObjectId = params.commentObjectId
    isopencomment = params.isopencomment

    //页面加载获取token用于判断是否可以评论或者点赞
    jsBridge.getData('token').then(res => {
      console.log(res)
      token = res
      //  token = 'de79498ef17162a06d50f1a820514180'
    })

    $('.main').empty()
    //
    if(params.isopencomment === '1'){
      getCommentList(params)

      //定位到评论区
      setTimeout(function(){
        // $('.commentInpt').focus()
        let top = $('.commentdetails-comment').offset().top
        $(document).scrollTop(top)
      },100)

    }else{
      getCommentList(params)
    }
  }

  /*页面所在窗口由后台前台时触发的方法,param为url参数，Object类型*/
  function startPage(params) {

  }

  // 时间格式化函数
  function formatTimeDisplay(timestamp) {
    const now = dayjs()
    const targetTime = dayjs(timestamp * 1000)
    const diffInMinutes = now.diff(targetTime, 'minute')
    const diffInHours = now.diff(targetTime, 'hour')
    const diffInDays = now.diff(targetTime, 'day')

    // 1小时内显示XX分钟前
    if (diffInMinutes < 60) {
      return diffInMinutes <= 0 ? '刚刚' : `${diffInMinutes}分钟前`
    }

    // 24小时内显示XX小时前
    if (diffInHours < 24) {
      return `${diffInHours}小时前`
    }

    // 24-48小时内显示昨天XX时XX分
    if (diffInDays === 1) {
      return `昨天${targetTime.format('HH时mm分')}`
    }

    // 当年的日期显示月/日/时/分
    if (targetTime.year() === now.year()) {
      return targetTime.format('MM-DD HH:mm:ss')
    }

    // 往年的日期显示年/月/日/时/分
    return targetTime.format('YYYY-MM-DD HH:mm:ss')
  }

  function reLoadPage() {
    jsBridge.getData('token').then(res => {
      console.log(res)
      token = res
      // token = '1111'
    })
  }
  //获取二级评论列表
  function getCommentList(params){
    Server.InteractionDDetailsComment.getSecondComment({'commentId':params.parentId,'datasource':params.datasource,'pageNum':pageNum,'pageSize':10}).then(res => {
      console.log(res)
      $('.commentheader').empty()
      $('.mainfooter').empty()
      $('.commentdetails-list').empty()
      if(res.code === 0){
         if(res.comment.list.length > 0) {
          let data = res.comment;
          let comment = res.comment.list[0];
          let secondComment = res.comment.list[0].childComment;

          let title =
          `<div class="commentdetails-list-left">
                <img src="${comment.headUrl?comment.headUrl:'../../images/allPic/touxiang.png'}" alt="">
            </div>
            <div class="commentdetails-list-right">
                <div class="list-right-title">
                  <span>${comment.userName}</span>
                  <span style="display:${comment.isOfficial && comment.isOfficial === '1' ? 'inline-block' : 'none'}" class="second-comment-official">官方</span>
                </div>
                <div class="list-right-subtitle"><span>${comment.content}</span></div>
                <div class="list-right-time">
                  <div class="timeBox-left">
                    <span class="create-dttm">${formatTimeDisplay(comment.createDttm)}</span>
                    <span class="point"></span>
                    <span>安徽</span>
                    <span class="reply" onclick="childcomment('${comment.userName}', '${comment.commentId}')">回复</span>
                  </div>
                  <div class="iconBox">
                          <span style="vertical-align:middle;">
                            <img class="click-icon" src="${'../../images/zixun/cancel-zan.png'}" alt="" data-status='1' style="display:${comment.ifThumbsup === '0' ? 'inline-block' : 'none'}" onclick="priase({'thumbupObjectId':'${comment.commentId}','status':'${comment.ifThumbsup === '0' ? '1' : '0'}'},this)">
                            <img class="click-icon" src="../../images/zixun/click-zan.png" alt="" data-status='0' style="display:${comment.ifThumbsup === '1' ? 'inline-block' : 'none'}" onclick="priase({'thumbupObjectId':'${comment.commentId}','status':'${comment.ifThumbsup === '1' ? '0' : '1'}'},this)">
                          </span>
                          <span class="click-num">${comment.thumbsupCnt}</span>
                        </div>
                </div>
            </div>`

            $('.commentdetails-list').append(title)

            // 为主评论绑定长按事件
            const mainCommentElement = $('.commentdetails-list').find('.list-right-subtitle').get(0);
            if (mainCommentElement) {
              const mainCommentData = {
                commentId: comment.commentId,
                content: comment.content,
                userName: comment.userName,
                userId: comment.userId,
                isSecondLevel: false,
                canDelete: comment.isDelete && comment.isDelete === '1',
              };
              bindCommentLongPress(mainCommentElement, mainCommentData);
            }

            let footer =
              ` <div class="footer-confirm" id='footer-confirm' >
                <img id="faceIcon-footer" class="face-icon" src="../../images/zixun/qing-icon.png" alt="">
                <span class="send-msg" onclick="sendComment()">
                  发送
                </span>
              </div>`

            $('.mainfooter').append(footer)

            if(secondComment.length === 0 && pageNum === 1){
              let nocomment =
              `<div class="commentmain-no">
                    <div class="commentmain-no-img">
                        <img src="../../images/interaction/zanwu.png" alt="">
                    </div>
                    <div class="commentmain-no-text">
                        <span>还没有评论，快来抢沙发～</span>
                    </div>
                </div>`
              $('.main').append(nocomment)
            }else{

              secondComment.map((i,v) => {
                let hascomment =
                `<div class="commentmain">
                    <div class="mainTop">
                        <div class="imgbox"><img src="${i.headUrl?i.headUrl:'../../images/allPic/touxiang.png'}" alt=""></div>
                        <span class="userName">${i.userName}</span>
                        <span style="display:${comment.isOfficial && comment.isOfficial === '1' ? 'inline-block' : 'none'}" class="second-comment-official">官方</span>
                    </div>
                    <div class="maintext">
                    <span style="display:${i.replyUserName && i.replyUserName !== '' ? 'inline-block' : 'none'}" class="second-comment-reply">
                        <span class="second-comment-reply-text">回复</span>
                        <span class="second-comment-reply-user">@</span>${i.replyUserName}:
                      </span>
                      ${i.content}
                    </div>
                    <div class="mainbottom">
                        <div class="mainbottom-left">
                            <span class="create-dttm">${formatTimeDisplay(i.createDttm)}</span>
                            <span class="point"></span>
                            <span >安徽</span>
                            <span class="reply" onclick="childcomment('${i.userName}')">回复</span>
                        </div>
                        <div class="mainbottom-right">
                            <div style='display:inline-block;vertical-align:middle;'>
                              <img src="../../images/zixun/cancel-zan.png" alt="" data-status='1' style="display:${i.ifThumbsup === '1'?'none':'block'}" onclick="priase({'status':'${i.ifThumbsup==='0'?'1':'0'}','thumbupObjectId':'${i.commentId}'},this)">
                              <img src="../../images/zixun/click-zan.png" alt="" data-status='0' style="display:${i.ifThumbsup === '1'?'block':'none'}" onclick="priase({'status':'${i.ifThumbsup==='1'?'0':'1'}','thumbupObjectId':'${i.commentId}'},this)">
                            </div>
                            <span style='vertical-align:middle;'>${i.thumbsupCnt}</span>
                        </div>
                    </div>

                </div>`
                $('.main').append(hascomment)

                // 为二级评论绑定长按事件
                const secondCommentElement = $('.main').children().last().find('.maintext').get(0);
                if (secondCommentElement) {
                  const secondCommentData = {
                    commentId: i.commentId,
                    content: i.content,
                    userName: i.userName,
                    userId: i.userId,
                    parentId: comment.commentId,
                    isSecondLevel: true,
                    canDelete: v.isDelete && v.isDelete === '1',
                  };
                  bindCommentLongPress(secondCommentElement, secondCommentData);
                }
              })

              // 判断是否没有更多评论了
              if(data.isLastPage === true) {
                // 检查是否已经存在"没有更多啦"提示，避免重复添加
                if($('.no-more-comment').length === 0) {
                  let noMoreComment =
                  `<div class="no-more-comment">
                      <span>没有更多啦~</span>
                  </div>`
                  $('.main').append(noMoreComment)
                }
              }
            }
         }
      }else{
        // jsBridge.toast('数据异常')
      }
    })
  }
//input框聚焦失焦,加定时器确保点击事件先触发
$('.commentInpt').blur(function(){
   requestAnimationFrame(function () {
      $('#footer-noconfirm').show()
      $('#faceIconWrap').show()
      $('#faceIcon-footer').hide()
      $('.commentInpt').attr('placeholder', '说说你的看法...')
    })
})
$('.commentInpt').focus(function(){
  $('#footer-noconfirm').hide()
  $('#faceIconWrap').hide()
  $('#faceIcon-footer').show()
})
  //点击发送按钮
  function sendComment(){
    if(token){
      content =  $('.commentInpt').val()
      if(content === ''){
        jsBridge.toast('提交内容不能为空')
      }else{
        Server.InteractionDDetailsComment.addComment({commentInfo:{'parentId':parentId,'commentObjectId':commentObjectId,'content':content,'datasource':'1'}}).then(res => {
        console.log(res)
        if(res.code === 0){
          //同步上一级页面刷新
          jsBridge.updateStatus({'type':'refresh','name':'refresh','infoId':commentObjectId,'value':'2'})
          // jsBridge.toast('评论成功')

          isopencomment = '0'
          $('.commentInpt').val('')
          $('.main').empty()
          $('.commentmain-no').hide()
          pageNum = 1
          getCommentList({'datasource':'1','pageNum':pageNum,'pageSize':5,'parentId':parentId})
          $('.commentInpt').blur()
          jsBridge.toast('评论成功，请等待审核~')
        }else{
          // jsBridge.toast('数据异常')
        }
      })
      }
    }else{
      // jsBridge.toast('暂未登录,请先登录...')
      jsBridge.openLogin()
    }
  }
  //点击底部的评论图标
  function picComment(){
    $('.commentInpt').focus()
  }
  //点击二级评论里面得回复按钮做三级评论等
  function childcomment(username){
    if(token){
      setTimeout(() => {
        $('.commentInpt').attr('placeholder', '回复' + username)
        $('.commentInpt').focus()
      }, 100)
    }else{
      jsBridge.openLogin()
    }
  }
  //点击评论的点赞按钮
  function priase(params1,params2){
    event.stopPropagation()
    // console.log(params1,params2)
    if(token){
        let status = $(params2).attr('data-status')
        if(status === '1'){
          let num = $(params2).parent().next().text()
          $(params2).parent().next().text(+num+1)
        }else{
          let num = $(params2).parent().next().text()
          $(params2).parent().next().text(+num-1)
        }
        $(params2).hide().siblings().show()
        Server.InteractionPriase.updatePriase({thumbup:{'status':status,'thumbupObjectId':params1.thumbupObjectId,'datasource':1,'objectSource':'6'}}).then(res => {
        console.log(res)
        if(res.code === 0){
          //切换点赞状态并且重新请求数据
          // $('.main').empty()
          // pageNum = 1
          // getCommentList({'datasource':'1','pageNum':pageNum,'pageSize':'5','parentId':parentId})
          // getCommentList({'datasource':'1','pageNum':'1','pageSize':'5','parentId':parentId})
        }else{
          // jsBridge.toast(res.msg)
        }
      })
    }else{
      // jsBridge.toast('暂未登录,请先登录')
      jsBridge.openLogin()
    }
  }
  //点击底部的点赞按钮
  function ftpriase(params1,params2){
    // console.log(params1,params2)
    event.stopPropagation()
    if(token){
      let status = $(params2).attr('data-status')
      if(status === '1'){
        let num = $(params2).parent().next().text()
        $(params2).parent().next().text(+num+1)
      }else{
        let num = $(params2).parent().next().text()
        $(params2).parent().next().text(+num-1)
      }
      $(params2).hide().siblings().show()
      Server.InteractionPriase.updatePriase({thumbup:{'status':status,'thumbupObjectId':params1.thumbupObjectId,'datasource':1,'objectSource':'6'}}).then(res => {
        console.log(res,'footerres')
        if(res.code === 0){
          //同步上一级页面刷新
          jsBridge.updateStatus({'type':'refresh','name':'refresh','infoId':commentObjectId,'value':'1'})
          //切换图片状态并且重新获取数据
          // $('.main').empty()
          // pageNum = 1
          // getCommentList({'datasource':'1','pageNum':pageNum,'pageSize':'5','parentId':parentId})
        }else{
          // jsBridge.toast(res.msg)
        }
      })
    }else{
      // jsBridge.toast('暂未登录,请先登录...')
      jsBridge.openLogin()
    }
  }
  //点击返回按钮
  function closeWindow(){
    jsBridge.closeWindows()
  }
  //滑动加载下一页
  document.addEventListener('scroll',function(){
    let top = $('.commentdetails-comment').offset().top
    let height = $('.commentdetails-comment').outerHeight(true)
    let maxHeight = document.body.offsetHeight
    let scroll = $(document).scrollTop()
    // console.log(scroll,'scroll')
    // console.log(top,'top')
    // console.log(height,'height')
    // console.log(maxHeight,'maxHeight')
    // console.log(top+height+51-maxHeight,'top+height-maxHeight')
    if(Math.round(top+height-maxHeight) === Math.round(scroll) ){
      pageNum++
      getCommentList({'datasource':'1','pageNum':pageNum,'pageSize':'5','parentId':parentId})
    }
  })

  // 表情选择器功能
  // 表情面板状态
  let isEmojiPanelOpen = false;

  // 表情数组
  const emojis = [
    '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
    '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
    '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
    '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
    '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
    '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
    '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
    '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
    '👋', '🤚', '🖐️', '✋', '🖖', '👌', '🤌', '🤏', '✌️', '🤞',
    '🤟', '🤘', '🤙', '👈', '👉', '👆', '🖕', '👇', '☝️', '👍',
    '👎', '👊', '✊', '🤛', '🤜', '👏', '🙌', '👐', '🤲', '🤝'
  ];

  // 初始化表情选择器
  function initEmojiPanel() {
    const emojiGrid = document.querySelector('.emoji-grid');
    emojis.forEach(emoji => {
      const emojiItem = document.createElement('div');
      emojiItem.className = 'emoji-item';
      emojiItem.textContent = emoji;
      emojiItem.onclick = function() {
        selectEmoji(emoji);
      };
      emojiGrid.appendChild(emojiItem);
    });
  }

  // 切换表情面板显示/隐藏
  function toggleEmojiPanel() {
    const emojiPanel = document.getElementById('emojiPanel');
    const commentdetailsFooter = document.querySelector('.commentdetails-footer');
    if (emojiPanel.style.display === 'none') {
      emojiPanel.style.display = 'block';
      isEmojiPanelOpen = true;
      setTimeout(() => {
        emojiPanel.classList.add('show');
        commentdetailsFooter.classList.add('footer-up');
      }, 10);
    } else {
      emojiPanel.classList.remove('show');
      isEmojiPanelOpen = false;
      setTimeout(() => {
        emojiPanel.style.display = 'none';
        commentdetailsFooter.classList.remove('footer-up');
      }, 250);
    }
  }

  // 选择表情
  function selectEmoji(emoji) {
    const input = document.querySelector('.commentInpt');
    const currentValue = input.value;
    input.value = currentValue + emoji;
    input.focus();
    // 隐藏表情面板
    toggleEmojiPanel();
  }

  // 为faceIcon-footer添加点击事件
  $(document).on('click', '#faceIcon-footer', function() {
    toggleEmojiPanel();
  });

  // 点击其他区域隐藏表情面板
  document.addEventListener('click', function(e) {
    const emojiPanel = document.getElementById('emojiPanel');
    const faceIconFooter = document.getElementById('faceIcon-footer');

    if (!emojiPanel.contains(e.target) && e.target !== faceIconFooter && !faceIconFooter.contains(e.target)) {
      if (emojiPanel.classList.contains('show')) {
        toggleEmojiPanel();
      }
    }
  });

  // 页面加载完成后初始化表情选择器
  $(document).ready(function() {
    initEmojiPanel();
    initCommentActionSheet();
  });

  // ActionSheet 相关变量
  let currentCommentData = null;
  let longPressTimer = null;
  let pendingDeleteCommentData = null; // 待删除的评论数据
  const LONG_PRESS_DURATION = 400; // 长按时间阈值（毫秒）
  let currentUserId = ''; // 当前用户ID，需要在页面初始化时设置

  // 初始化评论ActionSheet功能
  function initCommentActionSheet() {
    // 绑定ActionSheet按钮事件
    $('#actionCopy').on('click', handleCopyComment);
    $('#actionReply').on('click', handleReplyComment);
    $('#actionDelete').on('click', handleDeleteComment);
    $('#actionCancel').on('click', hideActionSheet);

    // 绑定删除确认弹窗事件
    $('#deleteCancel').on('click', hideDeleteConfirm);
    $('#deleteConfirm').on('click', confirmDeleteComment);

    // 点击遮罩层关闭
    $('.action-sheet-overlay').on('click', hideActionSheet);
    $('.modal-overlay').on('click', hideDeleteConfirm);
  }

  // 显示ActionSheet
  function showActionSheet(commentData) {
    currentCommentData = commentData;

    // 根据评论数据判断是否显示删除按钮
    // 这里可以根据实际业务逻辑判断，比如是否是当前用户的评论
    const canDelete = commentData.canDelete || false;
    $('#actionDelete').toggle(canDelete);

    $('#commentActionSheet').fadeIn(300);
  }

  // 隐藏ActionSheet
  function hideActionSheet() {
    const $content = $('.action-sheet-content');
    $content.addClass('slide-down');

    // 等待动画完成后隐藏整个组件
    setTimeout(() => {
      $('#commentActionSheet').hide();
      $content.removeClass('slide-down');
      currentCommentData = null;
    }, 300);
  }

  // 显示删除确认弹窗
  function showDeleteConfirm() {
    $('#deleteConfirmModal').fadeIn(300);
  }

  // 隐藏删除确认弹窗
  function hideDeleteConfirm() {
    $('#deleteConfirmModal').fadeOut(300);
    // 清空待删除的评论数据
    pendingDeleteCommentData = null;
  }

  // 复制评论内容
  function handleCopyComment() {
    if (!currentCommentData || !currentCommentData.content) {
      return;
    }

    // 创建临时文本域来复制内容
    const textarea = document.createElement('textarea');
    textarea.value = currentCommentData.content;
    document.body.appendChild(textarea);
    textarea.select();

    try {
      document.execCommand('copy');
      jsBridge.toast('复制成功');
    } catch (err) {
      console.error('复制失败:', err);
      jsBridge.toast('复制失败');
    }

    document.body.removeChild(textarea);
    hideActionSheet();
  }

  // 回复评论
  function handleReplyComment() {
    if (!currentCommentData) {
      return;
    }
    const commentContent = currentCommentData;
    hideActionSheet();
    childcomment(commentContent.userName, commentContent.commentId)
  }

  // 删除评论
  function handleDeleteComment() {
    // 保存待删除的评论数据
    pendingDeleteCommentData = currentCommentData;
    hideActionSheet();
    showDeleteConfirm();
  }

   // 确认删除评论
  function confirmDeleteComment() {
    if (!pendingDeleteCommentData || !pendingDeleteCommentData.commentId) {
      return;
    }

    if (token) {
      Server.informationcommentList.deleteComment({
        commentObjectId: commentObjectId,
        commentId: pendingDeleteCommentData.commentId
      }).then(res => {
        if (res.code === 0) {
          jsBridge.toast('删除成功');
          // 刷新评论列表
          $('.info-detail-comment-content ul').empty();
          pageNum = 1;
          getCommentList({'datasource':'1','pageNum':pageNum,'pageSize':5,'parentId':parentId})
        } else {
          jsBridge.toast('删除失败');
        }
      }).catch(err => {
        jsBridge.toast('删除失败');
      });
    } else {
      jsBridge.openLogin()
    }
    hideDeleteConfirm();
    // 清空待删除的评论数据
    pendingDeleteCommentData = null;
  }

  // 绑定评论长按事件
  function bindCommentLongPress(element, commentData) {
    let startTime = 0;
    let isLongPress = false;

    // 确保 element 是 jQuery 对象
    const $element = $(element);

    // 触摸开始
    $element.on('touchstart', function(e) {
      startTime = Date.now();
      isLongPress = false;

      longPressTimer = setTimeout(() => {
        isLongPress = true;
        showActionSheet(commentData);
      }, LONG_PRESS_DURATION);
    });

    // 触摸结束
    $element.on('touchend touchcancel', function(e) {
      if (longPressTimer) {
        clearTimeout(longPressTimer);
        longPressTimer = null;
      }

      // 如果是长按，阻止默认的点击事件
      if (isLongPress) {
        e.preventDefault();
        e.stopPropagation();
      }
    });

    // 触摸移动时取消长按
    $element.on('touchmove', function(e) {
      if (longPressTimer) {
        clearTimeout(longPressTimer);
        longPressTimer = null;
      }
    });
  }

</script>

</html>